<template>
  <div>
    <!-- 基础插槽（Default Slot） -->
    <!-- <slot></slot> -->
    <!-- <hr /> -->

    <!-- 具名插槽（Named Slots） -->
    <header>
      <slot name="heager"></slot>
    </header>
    <footer>
      <slot name="footer"></slot>
    </footer>
    <hr />

    <!-- 作用域插槽（Scoped Slots） -->
    <main>
      <slot :message="'helloworld'" :value="'app'"></slot>
    </main>
    <hr />

    <!-- 动态插槽名称 -->
    <main>
      <slot :name="slotName"></slot>
    </main>
    <hr />

    <!-- 插槽的默认内容 -->
    <slot name="abc">我是子组件的默认插座内容</slot>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const slotName = ref('dynamicSlotName');
</script>
